<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="header">
      <!-- 头部左侧 -->
      <div class="left">
        <div class="left-top">
          <!-- 卡一 -->
          <div class="left-car1">
            <!-- //卡一头部 -->
            <div class="top">
              <span class="name">工单统计</span
              ><span class="time"
                >{{ workTickets.start }} ~ {{ workTickets.end }}</span
              >
            </div>
            <!-- 卡一元素 -->
            <div class="main">
              <div class="box">
                <div class="num">{{ workTickets.total }}</div>
                <div class="unit">工单总数(个)</div>
              </div>
              <div class="box">
                <div class="num">{{ workTickets.completedTotal }}</div>
                <div class="unit">完成工单(个)</div>
              </div>
              <div class="box">
                <div class="num">{{ workTickets.progressTotal }}</div>
                <div class="unit">进行工单(个)</div>
              </div>
              <div class="box">
                <div class="num">{{ workTickets.cancelTotal }}</div>
                <div class="unit">取消工单(个)</div>
              </div>
            </div>
          </div>
          <!-- //卡二头部 -->
          <div class="left-car2">
            <div class="top">
              <span class="name">销售统计</span
              ><span class="time"
                >{{ workTickets.start }} ~ {{ workTickets.end }}</span
              >
            </div>
            <!-- 卡二元素 -->
            <div class="main">
              <div class="box">
                <div class="num">{{ sale.orderCount }}</div>
                <div class="unit">订单数(个)</div>
              </div>
              <div class="box">
                <div class="num">{{ sale.amountCollect }}</div>
                <div class="unit">销售额(万)</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 左侧底部 -->
        <div class="left-bottom">
          <div class="title">
            <div class="left">
              <span class="name">工单统计</span
              ><span class="time"
                >{{ workTickets.start }} ~ {{ workTickets.end }}</span
              >
            </div>
            <div class="right">
              <div :class="show == 1 ? 'box' : ''" @click="box(1)">周</div>
              <div :class="show == 2 ? 'box' : ''" @click="box(2)">月</div>
              <div :class="show == 3 ? 'box' : ''" @click="box(3)">年</div>
            </div>
          </div>
          <div class="left-bottom-main">
            <div class="left-bottom-box" ref="Line"></div>

            <!-- <div class="woring">
              <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""/>
              <div class="none">暂无数据</div>
            </div> -->

            <div class="left-bottom-box1" ref="hist"></div>

            <!-- <div class="woring">
              <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""/>
              <div class="none">暂无数据</div>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 右侧列表 -->
      <el-card class="right">
        <div class="title">
          <span class="name">商品热榜</span
          ><span class="time"
            >{{ workTickets.start }} ~ {{ workTickets.end }}</span
          >
        </div>
        <div class="item">
          <div class="round one">
            <span>{{ 1 }}</span>
          </div>
          <div class="count">{{ uname[0] }}</div>
          <div class="number">{{ key[0] }}单</div>
        </div>
        <div class="item">
          <div class="round two">
            <span>{{ 2 }}</span>
          </div>
          <div class="count">{{ uname[1] }}</div>
          <div class="number">{{ key[1] }}单</div>
        </div>
        <div class="item">
          <div class="round three">
            <span>{{ 3 }}</span>
          </div>
          <div class="count">{{ uname[2] }}</div>
          <div class="number">{{ key[2] }}单</div>
        </div>
        <div v-for="(item, index) in Lisk" :key="index" class="item">
          <div class="round back">
            <span>{{ index + 4 }}</span>
          </div>
          <div class="count">{{ item.skuName }}</div>
          <div class="number">{{ item.count }}单</div>
        </div>
      </el-card>
    </div>
    <!-- //底部 -->
    <div class="bottom">
      <!-- //底部左侧 -->
      <div class="bottom-left">
        <div class="bottom-left-left" ref="Pie"></div>
        <div class="bottom-left-right">
          <div class="title">
            <div class="round">
              <i class="el-icon-more"></i>
            </div>
          </div>
          <div class="box">
            <div class="box-box">
              <div class="num">{{ Pie.point }}</div>
              <div class="unit">点位数</div>
            </div>
            <div class="box-box">
              <div class="num">{{ Pie.num }}</div>
              <div class="unit">合作商数</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部右侧 -->
      <div class="bottom-right">
        <div class="title">
          <div class="name">异常设备监控</div>
          <div class="round">
            <i class="el-icon-more"></i>
          </div>
        </div>
        <div class="imgs">
          <img
            src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          />
          <div class="none">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  taskReportInfo,
  orderCount,
  orderAmount,
  skuTop,
  point,
  regionCollect,
  partners,
  // business,
  ountCollect
} from '@/api/home'
export default {
  async created () {
    console.log(1)
    // 工单统计
    this.current = new Date()
    this.nowYear = this.current.getFullYear() // 年
    this.nowMonth = this.current.getMonth() + 1 // 月
    this.nowdates = this.current.getDate() // 日
    this.nowweeks = this.current.getDay() // 星期
    this.workTickets.start = `${this.nowYear}-${this.nowMonth}-${
      this.nowdates + 1 - this.nowweeks
    }`
    this.workTickets.start = `${this.nowYear}-${this.nowMonth}-01`
    this.workTickets.end = `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
    console.log(this.workTickets.start, this.workTickets.end)
    // 工单汇总
    const res = await taskReportInfo({
      start: this.workTickets.start + ' 00:00:00',
      end: this.workTickets.end + ' 23:59:59'
    })
    console.log(res)
    res.forEach((item) => {
      this.workTickets.total += item.total
      this.workTickets.completedTotal += item.completedTotal
      this.workTickets.progressTotal += item.progressTotal
      this.workTickets.cancelTotal += item.cancelTotal
    })
    // 销售额和总数
    this.sale.orderCount = await orderCount({
      start: this.workTickets.start + ' 00:00:00',
      end: this.workTickets.end + ' 23:59:59'
    })
    this.sale.amountCollect = (
      (await orderAmount({
        start: this.workTickets.start + ' 00:00:00',
        end: this.workTickets.end + ' 23:59:59'
      })) / 1000000
    ).toFixed(2)
    this.Pie.data = await partners()
    this.Pie.point = await point()
    this.Pie.num = this.Pie.data.length
    const text = await ountCollect({
      collectType: 1,
      start: `${this.nowYear}-${this.nowMonth}-${
          this.nowdates + 1 - this.nowweeks}`,
      end: `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
    })
    const text2 = await regionCollect({
      collectType: 1,
      start: this.workTickets.start,
      end: this.workTickets.end
    })
    this.top.series = text.series
    this.top.xAxis = text.xAxis
    this.top.region = text2.xAxis
    this.top.num = text2.series
    this.EchartsTop()
    this.EchartsBot()

    this.Lisk = await skuTop({
      topValue: 10,
      start: `${this.nowYear}-${this.nowMonth}-01`,
      end: `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
    })
    this.Lisk.forEach((item, index) => {
      if (index < 3) {
        this.uname.push(item.skuName)
        this.key.push(item.count)
      }
    })
    this.Lisk.splice(0, 3)

    // console.log(this.hist.setOption)
  },
  data () {
    return {
      show: 1,
      current: 0,
      nowYear: 0,
      nowMonth: 0,
      nowdates: 0,
      nowweeks: 0,
      workTickets: {
        total: 0, // 工单总数
        completedTotal: 0, // 完成工单
        progressTotal: 0, // 进行工单
        cancelTotal: 0, // 取消工单
        end: '',
        start: ''
      },
      sale: {
        orderCount: 0,
        amountCollect: 0
      },
      top: {
        series: [],
        xAxis: [],
        region: [],
        num: []
      },
      Pie: {
        data: [],
        point: [],
        num: []
      },
      Lisk: [],
      uname: [],
      key: []
    }
  },
  methods: {
    async box (id) {
      this.show = id
      // this.hist.clear()
      // this.Line.clear()
      if (id === 1) {
        // console.log(id)
        this.workTickets.start = `${this.nowYear}-${this.nowMonth}-${
          this.nowdates + 1 - this.nowweeks
        }`
        this.workTickets.end = `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
        const text = await ountCollect({
          collectType: 1,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        const text2 = await regionCollect({
          collectType: 1,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        this.top.series = text.series
        this.top.xAxis = text.xAxis
        this.top.region = text2.xAxis
        this.top.num = text2.series

        this.EchartsTop()
      } else if (id === 2) {
        // console.log(id)
        this.workTickets.start = `${this.nowYear}-${this.nowMonth}-01`
        this.workTickets.end = `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
        const text = await ountCollect({
          collectType: 1,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        const text2 = await regionCollect({
          collectType: 1,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        this.top.series = text.series
        this.top.xAxis = text.xAxis
        this.top.region = text2.xAxis
        this.top.num = text2.series
        this.EchartsTop()
      } else if (id === 3) {
        // console.log(id)
        this.workTickets.start = `${this.nowYear}-01-01`
        this.workTickets.end = `${this.nowYear}-${this.nowMonth}-${this.nowdates}`
        const text = await ountCollect({
          collectType: 2,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        const text2 = await regionCollect({
          collectType: 1,
          start: this.workTickets.start,
          end: this.workTickets.end
        })
        this.top.series = text.series
        this.top.xAxis = text.xAxis
        this.top.region = text2.xAxis
        this.top.num = text2.series
        this.EchartsTop()
      }
    },
    EchartsTop () {
      // 柱状图
      const hist = echarts.init(this.$refs.hist)
      hist.setOption({
        title: {
          left: 'center',
          text: '销售额分布',
          textStyle: {
            fontSize: '14px'
          }
        },
        tooltip: {},
        xAxis: {
          data: this.top.region
        },
        yAxis: { name: '单位：元' },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.top.num,
            barMaxWidth: 20
          }
        ]
      })

      // 折线
      const Line = echarts.init(this.$refs.Line)
      Line.setOption({
        title: {
          left: 'center',
          text: '销售额趋势图',
          textStyle: {
            fontSize: '14px'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            axis: 'x'
          },
          lineStyle: {
            type: 'solid',
            dashOffset: 5
          }
        },
        xAxis: {
          data: this.top.xAxis
        },
        yAxis: { name: '单位：元' },
        series: [
          {
            name: '销量',
            data: this.top.series,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#fdcaca'
                },
                {
                  offset: 1,
                  color: '#fff8f8'
                }
              ])
            }
          }
        ]
      })
    },
    EchartsBot () {
      // 饼状图
      const Pie = echarts.init(this.$refs.Pie)
      Pie.setOption({
        title: {
          text: '合作商点位数Top5',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>总占比 : {d}%'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '60%'],
            data: this.Pie.data,
            label: {
              formatter: '{b}\n{d}%'
            },
            roseType: 'radius'
          }
        ],
        color: ['#92b7ff', '#a8ffcf', '#ffc298', '#d9ffff', '#d1e0fd']
      })
    }
  },
  mounted () {}
}
</script>

<style lang="scss" scoped>
.header {
  .woring {
    width: 50%;
    height: 100%;
    margin-top: 5%;
    text-align: center;
    .none {
      margin-left: 2%;
      margin-top: 2%;
      font-size: 14px;
      color: #20232a;
    }
  }
  .top {
    margin: 0 auto;
    margin-top: 16px;
    width: 92%;
    height: 30px;
    line-height: 30px;
  }
  .name {
    font-size: 16px;
    margin-right: 10px;
    font-weight: 600;
  }
  .time {
    font-size: 12px;
    color: #999;
  }
  // background-color: red;
  display: flex;
  width: 100%;
  height: 570px;
  .left {
    width: 75%;
    .left-top {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      .left-car1 {
        width: 55%;
        background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
        margin-right: 20px;
        height: 175px;
        border-radius: 15px;

        .main {
          width: 95%;
          margin-left: 24px;
          display: flex;
          .box {
            font-size: 36px;

            width: 22%;
            height: 114px;
            line-height: 114px;
            text-align: center;
            margin-right: 20px;
            margin-top: 0px;
            color: #072074;
            .num {
              height: 30%;
              font-weight: 600;
            }
            .unit {
              font-size: 12px;
              color: #91a7dc;
              height: 10%;
            }
          }
        }
      }
      .left-car2 {
        width: 55%;
        background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
        margin-right: 20px;
        height: 175px;
        border-radius: 15px;

        .main {
          width: 95%;
          margin-left: 24px;
          display: flex;
          .box {
            font-size: 36px;

            width: 45%;
            height: 114px;
            line-height: 114px;
            text-align: center;
            margin-right: 20px;
            margin-top: 0px;
            color: #ff5757;
            .num {
              height: 30%;
              font-weight: 600;
            }
            .unit {
              font-size: 12px;
              color: #de9690;
              height: 10%;
            }
          }
        }
      }
    }
    .left-bottom {
      background: #fff;

      margin-top: 20px;
      width: 98.2%;
      height: 374px;
      border-radius: 15px;
      .title {
        height: 20%;
        //  margin-top: 15px;
        display: flex;
        .left {
          width: 49%;
          height: 100%;
          line-height: 74px;
          margin-left: 20px;
        }
        .right {
          display: flex;
          width: 11%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          margin-top: 22px;
          margin-left: 35%;
          background-color: #dbe7f4;
          border-radius: 8px;
          div {
            font-size: 10px;
            width: 33%;
            border-radius: 8px;
          }
          .box {
            background-color: #f7fbff;
          }
        }
      }
      .left-bottom-main {
        display: flex;
        margin-top: 20px;
        height: 85%;
        margin-left: 20px;
        .left-bottom-box {
          width: 48%;
        }
        .left-bottom-box1 {
          width: 54%;
        }
      }
    }
  }
  .right {
    background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    width: 25%;
    height: 100%;
    border-radius: 15px;
    .title {
      width: 92%;
      height: 30px;
    }
    .item {
      padding: 8px 0;
      margin-top: 14px;
      display: flex;
      font-size: 14px;
      .count {
        width: 40%;
      }
      .back {
        background: url(@/assets/10.png) no-repeat 12%;
      }
      .one {
        background: url(@/assets/1.jpg) no-repeat;
      }
      .two {
        background: url(@/assets/2.jpg) no-repeat;
      }
      .three {
        background: url(@/assets/3.jpg) no-repeat;
      }
      .round {
        font-size: 13px;
        width: 10%;
        height: 50%;
        // text-align: center;
        padding: 0 7px;
        margin-right: 35px;
      }
      .number {
        margin-left: 20%;
      }
    }
  }
}
.bottom {
  width: 100%;
  height: 360px;

  margin-top: 20px;
  border-radius: 15px;
  display: flex;
  .bottom-left {
    margin-right: 20px;
    background: #fff;

    border-radius: 15px;
    width: 60%;
    display: flex;
    .bottom-left-left {
      width: 68%;
      height: 90%;
      margin-top: 20px;
      margin-left: 10px;
    }
    .bottom-left-right {
      width: 30%;
      height: 100%;
      margin-left: 10px;
      .title {
        width: 100%;
        height: 10%;
        font-size: 3px;
        color: #5f84ff;
        .round {
          width: 5%;
          height: 44%;
          text-align: center;
          border: 2px solid #5f84ff;
          border-radius: 100%;
          margin-left: 86%;
          margin-top: 8%;
        }
      }
      .box {
        width: 50%;
        margin-top: 8%;
        height: 55%;
        text-align: center;
        border-radius: 0 20px 0 20px;
        background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
          linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
          linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
          linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
      }

      .box-box {
        height: 40%;
        line-height: 90px;
        .num {
          height: 30%;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
        }
        .unit {
          font-size: 12px;
          color: #000412;
        }
      }
    }
  }
  .bottom-right {
    background: #fff;
    border-radius: 15px;
    width: 40%;
    height: 100%;
    // line-height: 50%;
    .title {
      display: flex;
      font-size: 3px;
      height: 10%;
      color: #5f84ff;
      margin-top: 3.5%;
      margin-left: 5%;
      .name {
        font-weight: 600;
        font-size: 16px;
        color: #333;
      }
      .round {
        width: 2.7%;
        height: 45%;
        text-align: center;
        border: 2px solid #5f84ff;
        border-radius: 100%;
        margin-left: 78%;
      }
    }
    .imgs {
      margin-top: 10%;
      margin-left: 38%;
      .none {
        margin-left: 10%;
        margin-top: 5%;
        font-size: 14px;
        color: #20232a;
      }
    }
  }
}
</style>
